import { DirectiveHook } from 'vue'
import waterImg from "@/assets/image/logo.png"

const watermark: DirectiveHook<HTMLDivElement> = (el, binding, vnode, prevnode) => {
    // 获取宽高 和 父元素
    const { clientWidth, clientHeight, parentElement } = el
    // 创建元素
    const waterMark = document.createElement("div") // 包裹水印元素
    const waterBg = document.createElement("div")   // 水印元素
    // 设置样式
    waterMark.className = "water-mark"
    waterMark.setAttribute('style', `
        display: inline-block;
        overflow: hidden;
        position: relative;
        width: ${clientWidth}px; 
        height: ${clientHeight}px;
        background-color: #ccc`);
    waterBg.setAttribute('style', `
        position: absolute;
        pointer-events: none;
        transform: rotate(45deg);
        width: 100%;
        height: 100%;
        opacity: 0.2;
        background-image: url(${waterImg}); 
        background-repeat: repeat;
    `);

    // 设置元素位置
    waterMark.append(waterBg)
    waterMark.append(el)
    parentElement?.append(waterMark);

}
export default watermark